<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/8/11
  Time: 0:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>充值</title>
  <link type="text/css" rel="stylesheet"
        href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
  <script src="../../js/jquery.js"></script>
  <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>
<style>
  body {
    user-select: none; /* 禁止文本被选中 */
    -webkit-user-select: none; /* Chrome浏览器的兼容性处理 */
    -moz-user-select: none; /* Firefox浏览器的兼容性处理 */
    -ms-user-select: none; /* IE/Edge浏览器的兼容性处理 */
  }
  .card {
    transition: transform 0.3s;
  }
  .card:hover {
    transform: scale(0.9);
    cursor: pointer;
  }
  #topUp:hover{
    cursor: pointer;
  }
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="../../image/logo.png" alt="Logo" style="border-radius: 50%;" width="30" height="30"
           class="d-inline-block align-top">
      SUN 图书馆
    </a>
  </div>
</nav>
<p style="height: 5px;background-color:brown"></p>
<div style="width: 1000px;margin:20px auto;">
  <p><span style="background-color:lightsalmon">&nbsp;</span>&nbsp;充值</p>
  <div style="height: 100px;background-color: whitesmoke;width: 100%;padding: 15px 10px;border-radius: 5px">
    <div class="row">
      <!-- 使用Bootstrap的卡片组件 -->
      <div class="col-md-3">
        <div class="card" money="6" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
          <div class="card-body text-center">
            <div>￥&nbsp;<span style="color: #4e555b">6</span></div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card" money="18" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
          <div class="card-body text-center">
            <div>￥&nbsp;<span style="color: #4e555b">18</span></div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card" money="64" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
          <div class="card-body text-center">
            <div>￥&nbsp;<span style="color: #4e555b">64</span></div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card" money="128" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
          <div class="card-body text-center">
            <div>￥&nbsp;<span style="color: #4e555b">128</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <p><span style="background-color: lightsalmon">&nbsp;</span>&nbsp;充值金额
    <input type="text" id="money" readonly style="width: 100px;height: 22px;font-size: 15px" placeholder="选择充值金额">
  </p>
  <br>
  <p><input id="topUp" type="button" value="充值" style="background-color: #333;color: white;border-radius: 10px;border: none;width: 60px"></p>
</div>

</body>
</html>
<script>
  $('.card').click(function () {
    let money = $(this).attr('money');
    $('#money').val(money)
  });
  $('#topUp').click(function (){
    if ($('#money').val() ==''){
      alert("请选择充值金额!")
    }else {
      let money = $('#money').val()
      $.ajax({
        'url': '../../ReaderController/topUpMoney',
        'type': 'post',
        'data': {money},
        'dataType': 'json',
        'success': topUpMoneySuccess
      })
    }
  })
  function topUpMoneySuccess(data) {
    if (data == 'ok'){
      alert("充值成功!")
      window.location.href = "../../jsp/home/home.jsp"
    }else {
      alert("充值失败!")
    }
  }
</script>